<template>
  <section id="cart" class="section card">
    <header class="section__header">
      <div>
        <h2>我的购物车</h2>
        <p v-if="isLoggedIn">
          共 {{ totalQty }} 件 · 预计金额 ￥{{ (totalAmount || 0).toFixed(2) }}
        </p>
        <p v-else>登录后可查看、管理购物车并发起库存核实。</p>
      </div>
      <button class="btn btn--ghost" @click="$emit('refresh')">
        刷新
      </button>
    </header>

    <div v-if="!isLoggedIn" class="section__placeholder">
      <p>您还未登录，请先登录后查看购物车。</p>
      <button class="btn btn--primary" @click="$emit('login')">立即登录</button>
    </div>

    <div v-else>
      <div v-if="error" class="section__error">
        <strong>加载失败：</strong>
        <span>{{ error }}</span>
        <button class="btn btn--primary" @click="$emit('refresh')">重试</button>
      </div>

      <div v-else-if="loading" class="cart__loading">正在加载购物车…</div>

      <div v-else-if="items.length" class="cart__table-wrapper">
        <table class="cart__table">
          <thead>
            <tr>
              <th>商品</th>
              <th>型号</th>
              <th>数量</th>
              <th>单价</th>
              <th>金额</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in items" :key="item.id">
              <td>
                <div class="cart__product">
                  <strong>{{ item.name }}</strong>
                  <small>{{ item.snapshot.unit || "件" }}</small>
                </div>
              </td>
              <td>{{ item.model }}</td>
              <td>
                <input
                  type="number"
                  min="1"
                  class="cart__qty"
                  :value="item.qty"
                  @change="evt => updateQty(item, Number(evt.target.value))"
                />
              </td>
              <td>￥{{ item.price.toFixed(2) }}</td>
              <td>￥{{ (item.price * item.qty).toFixed(2) }}</td>
              <td class="cart__actions">
                <button class="link" @click="$emit('verify', item)">核实库存</button>
                <button class="link link--danger" @click="$emit('remove', item)">
                  删除
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div v-else class="section__placeholder">
        <p>购物车为空，去上方商品列表挑选合适的型号吧。</p>
      </div>
    </div>
  </section>
</template>

<script setup>
const props = defineProps({
  items: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false },
  error: { type: String, default: "" },
  isLoggedIn: { type: Boolean, default: false },
  totalQty: { type: Number, default: 0 },
  totalAmount: { type: Number, default: 0 }
});

const emit = defineEmits(["login", "refresh", "update", "remove", "verify"]);

const updateQty = (item, qty) => {
  if (!qty || qty < 1) return;
  if (qty === item.qty) return;
  emit("update", { id: item.id, qty });
};
</script>

<style scoped lang="scss">
.section {
  margin-top: 28px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  h2 {
    margin: 0;
  }

  p {
    margin: 6px 0 0;
    color: var(--gray-500);
  }
}

.section__placeholder {
  text-align: center;
  padding: 24px;
  background: var(--gray-100);
  border-radius: 12px;

  .btn {
    margin-top: 12px;
  }
}

.section__error {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 125, 0, 0.08);
  color: #c15c00;
  padding: 16px;
  border-radius: 12px;

  .btn {
    margin-left: auto;
  }
}

.cart__loading {
  padding: 20px;
  color: var(--gray-500);
}

.cart__table-wrapper {
  overflow-x: auto;
}

.cart__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;

  th,
  td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    text-align: left;
  }

  th {
    background: var(--gray-100);
    font-weight: 600;
  }
}

.cart__product {
  display: flex;
  flex-direction: column;
  gap: 4px;

  small {
    color: var(--gray-500);
  }
}

.cart__qty {
  width: 80px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}

.cart__actions {
  display: flex;
  gap: 12px;
}

.link {
  border: none;
  background: none;
  color: var(--primary-color);
  cursor: pointer;
  padding: 0;

  &--danger {
    color: #d14343;
  }
}
</style>
